<template>
	<view class="page-center">
		<nav-bar title="" :showLeftIcon="true" :leftSlot="true">
			<template slot="leftSlot">
				<view class="header-box">
					<!-- logo缺 -->
					<view class="logo"></view>
					<view class="tab-list">
						<view v-for="(item, index) in tabsList" :key="index"
							:class="['tab-item', tabActive == item.value ? 'active-item':'']" 
							@tap="checkType(item)">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</template>
		</nav-bar>

		<view class="select-area">
			<view class="select-area-item">
				<view>
					<text>出发：</text>
					<text style="font-size: 26rpx;color: #333">武汉</text>
				</view>

				<u-icon name="arrow-down-fill"></u-icon>
			</view>
			<view class="select-area-item">
				<view>
					<text>出发：</text>
					<text style="font-size: 26rpx;color: #333">武汉</text>
				</view>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
		</view>


		<you-scroll :loadingHeight="loadingHeight" :mainHeight="scrollHeight" :isAllData="isAllData"
			:isRequestSuccess="isRequestSuccess" @onRefresh="onRefresh" @loadMore="loadMore">
			<template>
				
				<!-- 在找车 -->
				<view class="tranport-list" v-if="tabActive == 1">
					<view class="tranport-item" v-for="item in 10" @click="toDetail">
						<view class="base-info">
							<view class="base-info-left">
								<!-- 头像缺 -->
								<view class="header-img"></view>
								<text>yaoyao~</text>
							</view>
							<view class="release-item">
								2024-09-04发布
							</view>
						</view>
						<view class="to-place">
							<text>南京 江宁</text>
							<image src="@/static/images/public/to-hear.png" mode=""></image>
							<text>徐州 铜山</text>
						</view>
						<view class="car-info">
							<text>轿车</text>
							<text style="margin: 0 10rpx;">/</text>
							<text>1台</text>
							<text style="margin: 0 10rpx;">/</text>
							<text>能正常行驶</text>
						</view>
						<view class="check-time">
							<text>托运日期：2024-09-07</text>
							<text class="dimension">(明天)</text>
						</view>
						<view class="quotation">
							<view class="quotation-left">
								<view class="quotation-price">
									<text style="font-size: 44rpx;">0</text>
									<text>元起</text>
								</view>
								<view class="quotation-Bidding">
									当前 0 次出价 0 人联系
								</view>
							</view>
							<view class="quotation-right">
								<view class="quotation-btn iphone" @click="callPhone">
									电话联系
								</view>
								<view class="quotation-btn quoteNow" @click.stop="toQuotation">
									立即报价
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 车找货 -->
				<view class="tranport-list" v-if="tabActive == 2">
					<view class="tranport-item" v-for="item in 10"  @click="toGoodsDetail">
						<view class="to-place flex-sp">
							<view class="">
								<text>南京 江宁</text>
								<image src="@/static/images/public/to-hear.png" mode=""></image>
								<text>徐州 铜山</text>
							</view>
							<view class="place-number">
								<text>800-1600</text>
								<text style="font-size: 24rpx;">元</text>
							</view>
						</view>
						<view class="car-info">
							<text>途经点</text>
							<text style="margin: 0 10rpx;">无</text>
						</view>
						<view class="check-time flex-sp">
							<text>预计起止时间：</text>
							<text class="dimension-fill">2024-09-04—2024-09-04</text>
						</view>
						<view class="quotation">
							<view class="quotation-left">
								<view class="quotation-carrier">
									 <!-- logo 缺-->
									<view class="carrier-logo"></view>
									<text>承运商名称</text>
									<view class="auth-iden">
										<!-- 切图缺 -->
										<view class=""></view>
										企业认证
									</view>
									<view class="auth-iden-yu">
										5位板
									</view>
								</view>
								<view class="quotation-release">
									2024-09-04发布
								</view>
							</view>
							<view class="quotation-right">
								<view class="quotation-btn quoteNow">
									电话联系
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
		</you-scroll>
		
		<!-- 发布需求 -->
		<view class="release-need" @click="toRelease">
			<image src="../static/images/public/release-req.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	export default {
		name: 'Transport',
		components: {},
		data() {
			return {
				tabsList: [{
						name: "在找车",
						value: '1'
					},
					{
						name: "在找货",
						value: '2'
					},
				],
				tabActive: '1',
				loadingHeight: '',
				scrollHeight: '',
				isRequestSuccess: false,
				isAllData: false,
			}
		},
		async onLoad() {
			this.scrollHeight = this.$store.getters.heightData.mainHeight - 48 + 'px'
			this.loadingHeight = this.$store.getters.heightData.mainHeight - 68 + 'px'

		},
		onShow() {

		},
		methods: {
			checkType(item) {
				this.tabActive = item.value;
			},
			onRefresh() {
				
			},
			loadMore() {
				
			},
			callPhone() {
				
			},
			toRelease() {
				uni.navigateTo({
					url: "/subPages/transport/release/index"
				})
			},
			toDetail() {
				uni.navigateTo({
					url: "/subPages/transport/detail/findCar"
				})
			},
			toGoodsDetail(){
				uni.navigateTo({
					url: "/subPages/transport/detail/findGoods"
				})
			},
			toQuotation() {
				uni.navigateTo({
					url: "/subPages/transport/detail/quotation"
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.flex-sp {
		display: flex;
		justify-content: space-between;
	}
	.page-center {
		background: #fff;
	}
	
	.header-box {
		display: flex;
		.logo {
			width: 64rpx;
			height: 64rpx;
		}
		.tab-list {
			display: flex;
			align-items: center;
		
			.tab-item {
				color: #000000;
				font-size: 30rpx;
				line-height: 1;
				opacity: 0.8;
				margin-left: 40rpx;
				padding: 20rpx 0;
			}
		
			.active-item {
				display: flex;
				flex-direction: column;
				font-size: 34rpx;
		
				&::after {
					content: "";
					display: inline-block;
					height: 8rpx;
					width: 68rpx;
					background: linear-gradient(90deg, #2f85ff1a 0%, #2F85FF 100%);
					border-radius: 6rpx;
				}
			}
		}
	}
	

	.select-area {
		padding: 8rpx 28rpx;
		padding-top: 0;
		display: flex;
		margin-bottom: 37rpx;

		.select-area-item {
			width: 336rpx;
			height: 64rpx;
			background: #f6f6f6;
			font-size: 26rpx;
			color: #666;
			margin-right: 20rpx;
			border-radius: 8rpx;
			line-height: 64rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			&:last-of-type {
				margin-right: 0;
			}
		}
	}



	.tranport-list {
		padding: 0 28rpx;

		.tranport-item {
			margin-bottom: 60rpx;

			.base-info {
				display: flex;
				font-size: 24rpx;
				color: #333;
				justify-content: space-between;
				align-items: center;
				line-height: 1;

				.base-info-left {
					display: flex;
				}

				.header-img {
					width: 36rpx;
					height: 36rpx;
				}

				.release-item {
					color: #999;
				}
			}

			.to-place {
				font-size: 30rpx;
				color: #1A1A1A;
				margin-top: 10rpx;

				image {
					width: 35rpx;
					height: 8rpx;
					margin: 0 12rpx;
					vertical-align: middle;
				}
				.place-number {
					font-size: 44rpx;
					color: #1777FF;
				}
			}

			.car-info {
				color: #ff7512;
				font-size: 26rpx;
				margin-top: 20rpx;
				line-height: 1;
			}

			.check-time {
				color: #9F9F9F;
				font-size: 24rpx;
				margin-top: 18rpx;
				line-height: 1;

				.dimension {
					color: #1777ff;
					margin: 20rpx;
				}
				.dimension-fill {
					color: #1C1C1C;
					font-size: 26rpx;
				}
			}

			.quotation {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				margin-top: 10rpx;

				.quotation-price {
					color: #1777FF;
				}

				.quotation-Bidding {
					color: #4D4D4D;
				}

				.quotation-btn {
					width: 172rpx;
					height: 64rpx;
					border-radius: 8rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 64rpx;
				}
				
				.quotation-carrier {
					display: flex;
					font-size: 24rpx;
					color: #1A1A1A;
					margin-top: 10rpx;
					.carrier-logo {
						width: 36rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
					.auth-iden {
						font-size: 20rpx;
						padding: 6rpx 12rpx;
						background: #D1E5FF;
						color: #1777FF;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
					.auth-iden-yu {
						color: #ff7512;
						font-size: 20rpx;
						padding: 6rpx 10rpx;
						background: #FFE3D1;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
				}
				.quotation-release {
					font-size: 24rpx;
					color: #9F9F9F;
					margin-top: 10rpx;
				}

				.quotation-right {
					display: flex;
					align-self: flex-end;
				}

				.quoteNow {
					background: #1777FF;
					color: #fff;
					margin-left: 20rpx;
				}

				.iphone {
					color: #1777FF;
					border: 2rpx solid #1777FF;
				}
			}
		}
	}
	.release-need {
		width: 248rpx;
		height: 88rpx;
		position: fixed;
		right: 0;
		bottom: 150rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	
	
	
</style>